---
title: Dark mode
description: HeroUI comes with two palette modes light (the default) and dark.
---

# Dark mode

HeroUI supports both `light` and `dark` themes. To enable dark mode, simply add the `dark` class to your root element (`html`, `body`, or `main`).

```jsx {11}
// main.tsx or main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import {HeroUIProvider} from "@heroui/react";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <HeroUIProvider>
      <main className="dark text-foreground bg-background">
        <App />
      </main>
    </HeroUIProvider>
  </React.StrictMode>,
);
```

This enables dark mode application-wide. For theme switching functionality, you can use a theme library or create a custom implementation.

<CarbonAd/>

## Using next-themes

For [Next.js](/docs/frameworks/nextjs) applications, [next-themes](https://github.com/pacocoursey/next-themes) provides seamless theme switching functionality.

> For more information, refer to the [next-themes](https://github.com/pacocoursey/next-themes) documentation.

### Next.js App Directory Setup

<Steps>

### Install next-themes

Install `next-themes` in your project.

<PackageManagers
  commands={{
    npm: 'npm install next-themes',
    yarn: 'yarn add next-themes',
    pnpm: 'pnpm add next-themes',
  }}
/>


### Add next-themes provider

Wrap your app with the `ThemeProvider` component from `next-themes`.

Go to your `app/providers.tsx` or `app/providers.jsx` (create it if it doesn't exist) and wrap the 
Component with the `HeroUIProvider` and the `next-themes` provider components.


```jsx
// app/providers.tsx
"use client";

import {HeroUIProvider} from '@heroui/react'
import {ThemeProvider as NextThemesProvider} from "next-themes";

export function Providers({children}: { children: React.ReactNode }) {
  return (
    <HeroUIProvider>
      <NextThemesProvider attribute="class" defaultTheme="dark">
        {children}
      </NextThemesProvider>
    </HeroUIProvider>
  )
}
```

> Note: We're using the `class` attribute to switch between themes, this is because HeroUI uses the `className` attribute.

### Add the theme switcher

Add the theme switcher to your app.

```jsx
// app/components/ThemeSwitcher.tsx
"use client";

import {useTheme} from "next-themes";
import {useEffect, useState} from "react";

export function ThemeSwitcher() {
  const [mounted, setMounted] = useState(false)
  const { theme, setTheme } = useTheme()

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) return null

  return (
    <div>
      The current theme is: {theme}
      <button onClick={() => setTheme('light')}>Light Mode</button>
      <button onClick={() => setTheme('dark')}>Dark Mode</button>
    </div>
  )
};
```

> **Note**: You can use any theme name you want, but make sure it exists in your 
`tailwind.config.js` file. See [Create Theme](/docs/customization/create-theme) for more details.

</Steps>

### Next.js Pages Directory Setup

<Steps>

### Install next-themes

Install `next-themes` in your project.

<PackageManagers
  commands={{
    npm: 'npm install next-themes',
    yarn: 'yarn add next-themes',
    pnpm: 'pnpm add next-themes',
  }}
/>

### Add next-themes provider

Go to pages`/_app.js` or `pages/_app.tsx` (create it if it doesn't exist) and  wrap the
Component with the `HeroUIProvider` and the `next-themes` provider components.

```jsx
// pages/_app.js
import {HeroUIProvider} from "@heroui/react";
import {ThemeProvider as NextThemesProvider} from "next-themes";

function MyApp({ Component, pageProps }) {
  return (
    <HeroUIProvider>
      <NextThemesProvider attribute="class" defaultTheme="dark">
        <Component {...pageProps} />
      </NextThemesProvider>
    </HeroUIProvider>
  )
}

export default MyApp;
```

> Note: We're using the `class` attribute to switch between themes, this is because HeroUI uses the `className` attribute.

### Add the theme switcher

Add the theme switcher to your app.

```jsx
// components/ThemeSwitcher.tsx
import {useTheme} from "next-themes";
import {useEffect, useState} from "react";

export const ThemeSwitcher = () => {
  const [mounted, setMounted] = useState(false)
  const { theme, setTheme } = useTheme()

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) return null

  return (
    <div>
      The current theme is: {theme}
      <button onClick={() => setTheme('light')}>Light Mode</button>
      <button onClick={() => setTheme('dark')}>Dark Mode</button>
    </div>
  )
};
```

> **Note**: You can use any theme name you want, but make sure it exists in your
`tailwind.config.js` file. See [Create Theme](/docs/customization/create-theme) for more details.

</Steps>


## Using use-theme hook

In case you're using plain React with [Vite](/docs/frameworks/vite) or [Create React App](https://create-react-app.dev/) 
you can use the [@heroui/use-theme](https://github.com/heroui-inc/heroui/tree/canary/packages/hooks/use-theme) hook to switch between themes.

<Steps> 

### Install @heroui/use-theme

Install `@heroui/use-theme` in your project.

<PackageManagers
  commands={{
    npm: 'npm install @heroui/use-theme',
    yarn: 'yarn add @heroui/use-theme',
    pnpm: 'pnpm add @heroui/use-theme',
  }}
/> 

### Add the theme switcher

Add the theme switcher to your app.

```jsx
// 'use client'; // uncomment this line if you're using Next.js App Directory Setup

// components/ThemeSwitcher.tsx
import {useTheme} from "@heroui/use-theme";

export const ThemeSwitcher = () => {
  const { theme, setTheme } = useTheme()

  return (
    <div>
      The current theme is: {theme}
      <button onClick={() => setTheme('light')}>Light Mode</button>
      <button onClick={() => setTheme('dark')}>Dark Mode</button>
    </div>
  )
};
```

> **Note**: You can use any theme name you want, but make sure it exists in your
`tailwind.config.js` file. See [Create Theme](/docs/customization/create-theme) for more details.


</Steps>
